<template>
	<view class="container">
		<view class="header" @click="login">
			<view class="content" >
				<view class="my-image iconfont iconwode1"></view>
				<view class="my-info">
					<view><span v-if="this.userInformation.userID">账户昵称:</span>{{this.$store.state.userInformation.zhnc||'登录/注册'}}</view>
					<view>用户ID:{{this.$store.state.userInformation.userID||'暂无ID'}}</view>
				</view>
				<view class="jiantou">></view>
			</view>
		</view>
		<view class="footer">
			<!-- 用户的 -->
			<view v-if="this.userInformation.isadmin==0">
				<navigator url="/pages/order/order" open-type="switchTab" class="footer-item">
					<span class="one">我的订单</span> <span class="two">></span> 
				</navigator>
				<!-- <navigator url="/pages/DaiShiYong/DaiShiYong" open-type="navigate" class="footer-item">
					<span class="one">待使用</span> <span class="two">></span> 
				</navigator> -->
				<navigator url="/pages/getCoupon/getCoupon" open-type="navigate" class="footer-item">
					<span class="one">我的优惠券</span> <span class="two">></span> 
				</navigator>
				<navigator  open-type="navigate" class="footer-item">
					<span class="one">当前版本：1.2</span> <span class="two">></span> 
				</navigator>
				<navigator url="/pages/checkLatestVersion/checkLatestVersion" open-type="navigate" class="footer-item">
					<span class="one">检查最新版本</span> <span class="two">></span> 
				</navigator>
			</view>
			<!-- 商家的 -->
			<view v-if="this.userInformation.isadmin==1">
				<!-- <navigator url="/pages/customerOrder/customerOrder" open-type="navigate" class="footer-item" >
					<span class="one">顾客订单</span> <span class="notice" v-if="flag">您有新的订单!</span> <span class="two">></span>
				</navigator> -->
				<view class="footer-item" @click="go_customerOrder">
					<span class="one">顾客订单</span>
					<span class="notice" v-if="flag">您有新的订单!</span>
					<span class="two">></span>
				</view>
				<navigator url="/pages/manageGoods/manageGoods" open-type="navigate" class="footer-item">
					<span class="one">菜品管理</span><span class="two">></span>
				</navigator>
				<navigator url="/pages/daySale/daySale" open-type="navigate" class="footer-item">
					<span class="one">当日销售</span><span class="two">></span>
				</navigator>
				<navigator url="/pages/monthSale/monthSale" open-type="navigate" class="footer-item">
					<span class="one">当月销售</span><span class="two">></span>
				</navigator>
				<view class="footer-item">
					<span class="one">当前版本号</span><span class="two">{{current_version}}</span>
				</view>
			</view>
		</view>
		<view  class="serve" @click="logout" v-if="this.userInformation.userID?true:false" >退出登录</view>
	</view>
</template>

<script>
	import {mapState,mapGetters} from 'vuex'
	export default{
		data(){
			return {
				flag:false,
			}
		},
		
		onLoad(){
			console.log('my', this.userInformation)
			// console.log('getters',this.count)
		},
		computed: {
		  ...mapState(['userInformation','cart','current_version']),
		  ...mapGetters(['count']),
		  
		  //顾客订单的数组的长度，
		  // 因为刚上来要直接计算，发ajax比直接计算慢，如果不加判断，刚上来直接计算是一个值,发完ajax又是一个值，会触发监视属性
		  // 所以先加判断,再没发完ajax时让它不返回值
			cus_length(){
				// this.$store.state.length?true:false
				if(this.$store.state.length){
					console.log('this.$store.state.length',this.$store.state.length)
					return this.$store.state.length
				}
			}
		},
		watch:{
			cus_length(newValue,oldValue){
				console.log('newValue',newValue)
				console.log('oldValue',oldValue)
				
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let curRoute = routes[routes.length - 1].route //获取当前页面路由
				console.log('curRoute',curRoute)
				
				if(newValue>oldValue){
					if(curRoute!='pages/customerOrder/customerOrder'){
						this.flag=true
						console.log('执行',this.flag)
					}
				}
			}
		},
		methods:{
			login(){
				console.log('login')
				// uni.navigateTo({url:this.$store.state.userInformation.userID ? '../my/my': '../login/login'});
				uni.navigateTo({url:this.userInformation.userID ? '../my/my': '../login/login'});
					
			},
			
			logout(){
				console.log('logout')
				if(this.$store.state.intervalID){
					clearInterval(this.$store.state.intervalID)
					console.log("clear了管理员循环获取顾客订单的ID")
				}
				if(this.$store.state.cusOrderID){
					clearInterval(this.$store.state.cusOrderID)
					console.log("clear了用户获取订单的定时器ID ")
				}
				/* this.$store.state.cart=[]
				this.$store.state.userInformation={}
				this.$store.state.show_user_address={} */
				this.$store.commit('logout_clear')
				console.log('this.userInformation',this.userInformation)
				console.log('this.cart',this.cart)
				uni.reLaunch({
					url:'/pages/login/login',
					// url:'../login/login'
					// url:'../FRL/FRL'
				})
				
				console.log('this.cart',this.cart)
			},
			go_customerOrder(){
				uni.navigateTo({
					url:'/pages/customerOrder/customerOrder'
				})
				this.flag=false
			}
		}
	}
</script>

<style lang="scss" scoped>
	 page{background-color:#f5f5f5 !important;}
	.container{
		width: 100%;
	}
	.header{
		width: 100%;
		height: 220upx;
		background-color:#02a774 ;
		// background-color:red ;
		// border-top: 1upx solid #fff;
		border-top: 1rpx solid #fff;
		// margin-top: 30px;
		.content{
			// border:1upx solid blue; 
			margin: 40upx 40upx;
			overflow:hidden;
		}
		.my-image{
			width: 120upx;
			height:120upx;
			// border: 1upx solid red;
			float: left;
			border-radius:50% ;
			overflow:hidden;
			font-size: 120upx;
			background: #e4e4e4;
			 // vertical-align: top;
		}
		.my-info{
			// border: 1upx solid yellow;
			float: left;
			margin-left: 20upx;
			margin-top: 20upx;
			color: #fff;
		}
		.jiantou{
			float: right;
			color: #fff;
			margin-top: 35upx;
		}
	}
	
	.middle{
		width: 100%;
		background-color: #fff;
		overflow: hidden;
		.middle-item{
			float: left;
			width: 33%;
			border-right: 1upx solid #f1f1f1;
			text-align: center;
			line-height: 100upx;
		}
	}
	.footer{
		margin-top: 30upx;
		.footer-item{
			// padding-right: 500upx;
			border-bottom: 1upx solid #F1F1F1;
			// line-height: 80upx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 80upx;
			// border: 1rpx solid #f00;
		}
		.one{
			margin-left: 30upx;
		}
		.notice{
			color: #f00;
		}
		.two{
			margin-right: 40upx;
		}
		
	}
	.serve{
		margin-top: 20upx;
		text-align: center;
		background-color: #02a774;
		border-bottom: 1upx solid #F1F1F1 ;
		line-height: 70upx;
		color: #fff;
	}
	
</style>
